<template>
    <section class="jie_kou_form">
  		<el-form ref="form" :model="jiekouForm" label-width="106px" class="second_form">
    				  <el-form-item label="接口地址">
					    <el-input v-model="form.inServiceDataSource.url"></el-input>
					  </el-form-item>
					  
						<el-form-item label="接口协议" >
					    	<el-radio-group v-model="form.inServiceDataSource.protocalType">
						      <el-radio-button class="box-radio" label="http">Restful</el-radio-button>
						      <el-radio-button class="box-radio" label="soap2">Soap</el-radio-button>
						    </el-radio-group>
						    <el-button type="primary" style="float: right;">上传附件</el-button>
		    			</el-form-item>
		    			
		    			<el-form-item label="调用方法">
					    	<el-radio-group v-model="form.inServiceDataSource.requestMethod" v-if="requestMethodDisplay==='restful'">
						      <el-radio-button class="box-radio" label="get">Get</el-radio-button>
						      <el-radio-button class="box-radio" label="post">Post</el-radio-button>
						    </el-radio-group>
                            <el-input v-model="form.inServiceDataSource.requestMethod" v-if="requestMethodDisplay==='soap'" >
                            </el-input>
		    			</el-form-item>
		    			
		    			<el-form-item label="传递方式" v-if="requestMethodDisplay==='restful'">
					    	<el-radio-group v-model="form.inServiceDataSource.requestDataType">
						      <el-radio-button class="box-radio" label="path">PathParam</el-radio-button>
						      <el-radio-button class="box-radio" label="body">RequestBody</el-radio-button>
						      <el-radio-button class="box-radio" label="param">QueryParam</el-radio-button>
						    </el-radio-group>
		    			</el-form-item>
		    			
		    			
		    			<!--********************************************form1-->
		    			<el-form-item label="请求参数" style="margin-bottom: 0;"></el-form-item>
						<el-table
						      :data="jiekouFormTable1Data"
						      style="width: 100%;">
						       <!--以后优化，可以整成组件-->
						      <el-table-column
						       	align="center"
						       	label="参数名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.canshuName"></el-input>
						      </template>
						       </el-table-column>
						       
						        <el-table-column
						       	align="center"
						       	label="中文名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.chineseName"></el-input>
						      </template>
						       </el-table-column>
						       
						      <el-table-column
						       	align="center"
						       	label="对应的元数据"
						       	>
						      <template slot-scope="scope">
						      		<el-select v-model="scope.row.yuanData" placeholder="请选择" style="width: 100px;">
									    <el-option
									      v-for="item in wenjianFormYuanDataOptions3"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
									<i class="el-icon-circle-plus-outline" @click="addYuanData" style="width: 10px;font-size: 18px;"></i>
						      </template>
						       </el-table-column>
						       
						      <el-table-column
						       	align="center"
						       	label="是否必填"
						       	>
						      <template slot-scope="scope">
						      		<el-switch  v-model="scope.row.ishas"></el-switch>
						      </template>
						       </el-table-column>
						       
						       <el-table-column
						       	align="center"
						       	label="是否校验"
						       	>
						      <template slot-scope="scope">
						      		<el-switch  v-model="scope.row.ischeck"></el-switch>
						      </template>
						       </el-table-column>
						       
						       <el-table-column
						       	align="center"
						       	label=""
						       	>
						      <template slot-scope="scope">
						      	<i class="el-icon-delete" @click="delFormData1(scope)"></i>
						      </template>
						       </el-table-column>
						 </el-table>
						 
						 <el-button type="primary" class="add_button" @click="addjiekouFormTable1Data">添加</el-button>
						 
						<!--********************************************form2-->
						<el-form-item label="返回数据" style="margin-bottom: 0;"></el-form-item>
						<el-table
						      :data="jiekouFormTable2Data"
						      style="width: 100%;">
						       
						      <el-table-column
						       	align="center"
						       	label="参数名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.canshuName"></el-input>
						      </template>
						       </el-table-column>
						       
						        <el-table-column
						       	align="center"
						       	label="中文名"
						       	>
						      <template slot-scope="scope">
						      	  <el-input v-model="scope.row.chineseName"></el-input>
						      </template>
						       </el-table-column>
						       
						      <el-table-column
						       	align="center"
						       	label="对应的元数据"
						       	>
						      <template slot-scope="scope">
						      		<el-select v-model="scope.row.yuanData" placeholder="请选择" style="width: 160px;">
									    <el-option
									      v-for="item in wenjianFormYuanDataOptions"
									      :key="item.id"
									      :label="item.name"
									      :value="item.id">
									    </el-option>
									</el-select>
									<i class="el-icon-circle-plus-outline"  @click="addYuanData" style="width: 10px;font-size: 18px;"></i>
						      </template>
						       </el-table-column>
						       
						       <el-table-column
						       	align="center"
						       	label=""
						       	>
						      <template slot-scope="scope">
						      	<i class="el-icon-delete" @click="delFormData2(scope)"></i>
						      </template>
						       </el-table-column>
						       
						 </el-table>
						 <el-button type="primary" class="add_button" @click="addjiekouFormTable2Data">添加</el-button>
<!--						 <el-button type="success" style="float: right;" class="add_button" @click="reset">刷新</el-button>-->
    			</el-form>
        
        
        <el-dialog
			  :title="titleDiy"
			  :visible.sync="dialogVisible1"
			  width="50%"
			  class="diy-dialog"
			  :append-to-body=true
			 >
			 <form-diy @insertData = "insertData" 
			 	@closeForm="closeForm" 
			 	:type="dialog1Type" 
			 	:content="currentPage" 
			 	:detail="detailData"></form-diy>
		</el-dialog>
        
        
    </section>
</template>

<script>
	import formDiy from '@/views/fuwuServer/components/formDiy'
    import {
    	componentGetYuanData2Type,
    	componentGetYuanData2Type3,
    	computedAddYuanData
    } from "../../common/js_css_img/serverResourceComputed"
    
    import {
    	componentAddYuanData,
    } from "@/views/fuwuServer/components/computedFuwuServer"
    
    export default {
    	components:{
    		formDiy
    	},
    	props:{
    		timeSubmit :Boolean,
    		HasDataForm:{
    			type:Object,
    			default:function(){
    				return {}
    			}
    		}
    	},
        data() {
          return {
          		detailData:{},
          		currentPage:'yuanData',
          		updataId :0,
          		titleDiy:'',
          		dialog1Type:'',
          		dialogVisible1:false,
          		jiekouForm:{
          			jiekouXieyi:'',
          			chuanshuMethods:'',
          			chuandiMethods:'',
          		},
          		form:{
	          		inServiceDataSource:{  //数据来源
						"type":1 //实时接口类型2;//文件类型3;//数据库类型
						,"url":""  //接口地址
						,"protocalType":"",  //接口协议，默认restful模式，方便监听接口变化
						"requestDataType":"",//传递方式
						'requestMethod':'',  //调用方法
						"outputDataFormList":[ //数据匹配
							
						]
					},
					outServiceDataSourceList:[//返回接口/返回文件
					{
						"type":"1", //返回接口2;//返回文件（注意，当数据来源是接口时这个type也要传，传1）
						"filePath" :''
						,"inputDataFormList":[ //请求参数  
							
						]
					},
				],
          		},
          		jiekouFormTable1Data:[
	          		
          		],
          		jiekouFormTable2Data:[
	          		
          		],
          		jiekouFormTableLabel:{
          			canshuName :'参数名',
          			chineseName:"中文名",
          			yuanData:'对应的元数据',
          			ishas:"是否必填",
          			ischeck:"是否校验",
          		},
          		jiekouFormYuanData:'',/*对应元数据*/
          		wenjianFormYuanDataOptions:[/*对应元数据，共享返回类的*/
          		],
          		wenjianFormYuanDataOptions3:[],/*对应元数据，共享请求类的*/
                requestMethodDisplay: 'restful',   //接口选择后，调用方法显示相应的输入，值为soap和restful
          		
          };
        },
        methods: {
        	
        	delFormData1(scope){
        		this.jiekouFormTable1Data.splice(scope.$index,1);
        	},
        	delFormData2(scope){
        		this.jiekouFormTable2Data.splice(scope.$index,1);
        	},
        	closeForm(){/*关闭弹窗*/
        		this.dialogVisible1 = false;
        	},
        	addYuanData(){/*新增元数据*/
				this.updataId = 0;
        		this.titleDiy = '新增元数据'
        		this.dialog1Type = 'add';
        		this.dialogVisible1 = true;		
        	},
        	addjiekouFormTable1Data(){/*第一个表单添加行*/
        		this.jiekouFormTable1Data.push(
        			{
	          			canshuName :'',
	          			chineseName:"",
	          			yuanData:'',
	          			ishas:false,
	          			ischeck:false,
	          		}
        		)
        	},
        	addjiekouFormTable2Data(){/*第二个表单添加行*/
        		this.jiekouFormTable2Data.push(
        			{
	          			canshuName :'',
	          			chineseName:"",
	          			yuanData:'',
	          		},
        		)
        	},
        	insertData(param){/*插入元数据,更新元数据*/

				computedAddYuanData(this,param);
        	},
        	resetYuanData(){/*更新元数据*/
        		componentGetYuanData2Type(this,{},2);/*获取共享返回类的元数据*/
        		componentGetYuanData2Type3(this,{},2);/*获取共享返回类的元数据*/
        	},
        	
        },
        computed: {
            protocalType() {    //接口协议监听中间层
                return this.form.inServiceDataSource.protocalType;
            }
        },
        mounted(){
        	componentGetYuanData2Type(this,{},2);/*获取共享返回类的元数据*/
        	componentGetYuanData2Type3(this,{},2);/*获取共享返回类的元数据*/
        },
        watch:{
        	timeSubmit(newVal){
        		console.log(this.jiekouFormTable1Data)
        		console.log(this.form);
        		this.form.outServiceDataSourceList[0].inputDataFormList = [];
        		for(let i in this.jiekouFormTable1Data){
        			this.form.outServiceDataSourceList[0].inputDataFormList.push(
        				{
        					"key":this.jiekouFormTable1Data[i].canshuName
							,"name":this.jiekouFormTable1Data[i].chineseName
							,"metaDataId":this.jiekouFormTable1Data[i].yuanData
							,"position":i
							,"isValid":this.jiekouFormTable1Data[i].isCheck===false?0:1
							,"isNecessary":this.jiekouFormTable1Data[i].isHas===false?0:1
        				}
        			)
        		}
        		this.form.inServiceDataSource.outputDataFormList = [];
        		for(let v in this.jiekouFormTable2Data){
        			this.form.inServiceDataSource.outputDataFormList.push(
        				{
        					"key":this.jiekouFormTable2Data[v].canshuName
        					,"name":this.jiekouFormTable2Data[v].chineseName
        					,"position":v
        					,"metaDataId":this.jiekouFormTable2Data[v].yuanData
        				}
        			)
        		}
        		console.log(this.form);
        		this.$emit("outPutForm",this.form);
        	},
            protocalType(newVal,oldVal){    //监听接口协议，默认restful模式
                if(newVal == 'http'){
                    this.requestMethodDisplay = 'restful'
                }else{
                    this.requestMethodDisplay = 'soap'
                }
            },
            HasDataForm:{
            	handler(newVal,oldVal){
            		this.form.inServiceDataSource.url = newVal.inServiceDataSource.url;
	            	this.form.inServiceDataSource.protocalType = newVal.inServiceDataSource.protocalType;
	            	this.form.inServiceDataSource.requestMethod = newVal.inServiceDataSource.requestMethod;
	            	this.form.inServiceDataSource.requestDataType = newVal.inServiceDataSource.requestDataType;
	            	for(let i in newVal.outServiceDataSourceList[0].inputDataFormList){
	            		this.jiekouFormTable1Data.push(
	            			{
			          			canshuName :newVal.outServiceDataSourceList[0].inputDataFormList[i].key,
			          			chineseName:newVal.outServiceDataSourceList[0].inputDataFormList[i].name,
			          			yuanData:newVal.outServiceDataSourceList[0].inputDataFormList[i].metaDataId,
			          			ishas:newVal.outServiceDataSourceList[0].inputDataFormList[i].isNecessary===1?true:false,
			          			ischeck:newVal.outServiceDataSourceList[0].inputDataFormList[i].isValid===1?true:false,
		          			}
	            		)
	            	}
	            	for(let i in newVal.inServiceDataSource.outputDataFormList){
	            		this.jiekouFormTable2Data.push(
	            			{
	            				canshuName :newVal.inServiceDataSource.outputDataFormList[i].key,
			          			chineseName:newVal.inServiceDataSource.outputDataFormList[i].name,
			          			yuanData:newVal.inServiceDataSource.outputDataFormList[i].metaDataId,
	            			}
	            		)
	            	}
            	},
            	deep:true
            },
  
        }
  };
</script>

<style>
    .jie_kou_form  .add_button{
    	margin-top: 15px;
    }
	.jie_kou_form .el-table{
		background-color: unset;
	}
	.jie_kou_form .el-table tr{
		background-color: unset;
	}
	.jie_kou_form .el-table thead{
		background-color: #e9eef8;
	}
</style>